<template>
    <!-- 部分发货 -->
    <div class="part-shipped">
        <div class="btn">
            <el-button @click="changeDate"
                :style="{ 'background': status === true ? '#004FEE' : '#fff', 'color': status === true ? '#fff' : '#333' }">变更交期</el-button>
            <el-button @click="changeNum"
                :style="{ 'background': status === true ? '#004FEE' : '#fff', 'color': status === true ? '#fff' : '#333' }">变更数量</el-button>
            <el-button @click="cancel"
                :style="{ 'background': status === true ? '#004FEE' : '#fff', 'color': status === true ? '#fff' : '#333' }">取消</el-button>
        </div>
        <el-table :data="tableData" ref="multipleTable" style="width: 100%"
            :header-cell-style="{ background: '#eee', color: '#000' }" :height="450"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="deliveryDate" label="交货期" width="150">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.status == '待发货'">
                        <div
                            style="width:8px;height:8px;background:#FFA900;margin-right:5px;border-radius: 50%;display:inline-block;">
                        </div>{{ scope.row.status }}
                    </div>
                    <div v-else-if="scope.row.status == '部分发货'">
                        <div
                            style="width:8px;height:8px;background:#3300FF;margin-right:5px;border-radius: 50%;display:inline-block;">
                        </div>{{ scope.row.status }}
                    </div>
                    <div v-else-if="scope.row.status == '已发货'">
                        <div
                            style="width:8px;height:8px;background:#32B457;margin-right:5px;border-radius: 50%;display:inline-block;">
                        </div>{{ scope.row.status }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="model" label="型号" width="150"> </el-table-column>
            <el-table-column prop="brand" label="品牌" width="150"> </el-table-column>
            <el-table-column prop="number" label="数量" width="150"> </el-table-column>
            <el-table-column prop="batch" label="批次" width="150"> </el-table-column>
            <el-table-column prop="package" label="封装" width="150"> </el-table-column>
            <el-table-column prop="currecy" label="币种" width="150"> </el-table-column>
            <el-table-column prop="price" label="单价" width="150">
                <template slot-scope="scope">
                    <div style="color:#32B457;">{{ scope.row.price }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="订单金额" width="150">
                <template slot-scope="scope">
                    <div style="color:#32B457;">{{ scope.row.money }}</div>
                </template>
            </el-table-column>
            ><el-table-column prop="address" label="交货地" width="150">
            </el-table-column>
            ><el-table-column prop="MPQ" label="MPQ" width="150"> </el-table-column><el-table-column prop="packing"
                label="包装" width="150"> </el-table-column>
            <el-table-column prop="order" label="订单项" width="170">
            </el-table-column>
            <el-table-column prop="desc" label="备注" width="150"> </el-table-column>
        </el-table>
        <el-pagination class="pagination" layout="total,sizes,prev, pager, next,jumper" :total="50">
        </el-pagination>
        <!-- 变更交期 -->
        <dateDrawer :drawer="drawer" @close="closeDrawer" />
        <!-- 变更数量 -->
        <numberDrawer :numDrawer="numDrawer" @close="closeNumDrawer" />
        <!-- 取消 -->
        <el-dialog title="取消" :visible.sync="dialogVisibleCancel" width="30%" top="31vh" :before-close="handleClose">
            <el-input type="textarea" placeholder="请输入取消原因" :rows="6" maxlength="120" show-word-limit></el-input>
            <div slot="footer" style="text-align: center">
                <el-button type="primary" @click="dialogVisibleCancel = false">确 定</el-button>
                <el-button @click="closeDialog">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import dateDrawer from "./dateDrawer.vue";
import numberDrawer from "./numberDrawer.vue";
export default {
    name: 'partShipped',
    data() {
        return {
            status: false,
            gutter: 5,
            span: 12,
            drawer: false,
            numDrawer: false,
            dialogVisibleCancel: false,
            tableData: [
                {
                    deliveryDate: '2023-02-20',
                    status: '待发货',
                    model: 'H1',
                    brand: 'KEMET',
                    number: '100',
                    batch: '1',
                    package: 'XXXW95',
                    currecy: '人民币',
                    price: "10.00",
                    money: '1000',
                    address: '国内',
                    MPQ: '1',
                    packing: '散装',
                    order: 'DD22020000295-006',
                    desc: ''
                },
                {
                    deliveryDate: '2023-02-20',
                    status: '部分发货',
                    model: 'H1',
                    brand: 'KEMET',
                    number: '100',
                    batch: '1',
                    package: 'XXXW95',
                    currecy: '人民币',
                    price: "10.00",
                    money: '1000',
                    address: '国内',
                    MPQ: '1',
                    packing: '散装',
                    order: 'DD22020000295-006',
                    desc: ''
                },
                {
                    deliveryDate: '2023-02-20',
                    status: '已发货',
                    model: 'H1',
                    brand: 'KEMET',
                    number: '100',
                    batch: '1',
                    package: 'XXXW95',
                    currecy: '人民币',
                    price: "10.00",
                    money: '1000',
                    address: '国内',
                    MPQ: '1',
                    packing: '散装',
                    order: 'DD22020000295-006',
                    desc: ''
                },
                {
                    deliveryDate: '2023-02-20',
                    status: '待发货',
                    model: 'H1',
                    brand: 'KEMET',
                    number: '100',
                    batch: '1',
                    package: 'XXXW95',
                    currecy: '人民币',
                    price: "10.00",
                    money: '1000',
                    address: '国内',
                    MPQ: '1',
                    packing: '散装',
                    order: 'DD22020000295-006',
                    desc: ''
                },
            ],
            multipleSelection: []
        }
    },
    components: {
        dateDrawer,
        numberDrawer
    },
    methods: {
        closeDrawer() {
            this.drawer = false;
            this.status = false;
            this.$refs.multipleTable.clearSelection();
        },
        closeNumDrawer() {
            this.numDrawer = false;
            this.status = false;
            this.$refs.multipleTable.clearSelection();
        },
        handleClose() {
            this.dialogVisibleCancel = false;
            this.$refs.multipleTable.clearSelection();
        },
        //变更交期
        changeDate() {
            if (this.multipleSelection.length > 0) {
                this.drawer = true;
            } else {
                this.$message.error('请选择数据进行操作');
            }

        },
        //变更数量
        changeNum() {
            if (this.multipleSelection.length > 0) {
                this.numDrawer = true;
            } else {
                this.$message.error('请选择数据进行操作');
            }
        },
        //取消
        cancel() {
            if (this.multipleSelection.length > 0) {
                this.dialogVisibleCancel = true;
            } else {
                this.$message.error('请选择数据进行操作');
            }
        },
        closeDialog() {
            this.dialogVisibleCancel = false;
            this.$refs.multipleTable.clearSelection();
        },
        //选中表格
        handleSelectionChange(val) {
            console.log('val', val)
            if (val.length > 0) {
                this.status = true;
                this.multipleSelection = val
            } else {
                this.status = false;
            }
        }
    }
}
</script>

<style scoped lang="scss">
.part-shipped {
    .btn {
        margin: 10px 0;
    }

    .pagination {
        margin-top: 10px;
        text-align: right;
    }
}</style>